<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="发布时间：">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目类型：">
        <el-select v-model="form.appType">
          <el-option v-for="item in consts.APP_TYPE" :label="item.title"
                     :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机端类型：">
        <el-select v-model="form.clientType">
          <el-option v-for="item in consts.PHONE_TYPE" :label="item.title"
                     :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本号：">
        <el-input v-model="form.version"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="gridSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.list" v-loading="loading" element-loading-text="加载中..." border>
      <el-table-column label="发布时间" prop="validDate">
        <template slot-scope="{row}">
          {{row.validDate|toTime}}
        </template>
      </el-table-column>
      <el-table-column label="项目类型" prop="appType">
        <template slot-scope="{row}">
          {{row.appType | appType}}
        </template>
      </el-table-column>
      <el-table-column label="手机端类型" prop="clientType">
        <template slot-scope="{row}">
          {{row.clientType | clientType}}
        </template>
      </el-table-column>
      <el-table-column label="版本号" prop="version"></el-table-column>
      <el-table-column label="更新类型" prop="updateType">
        <template slot-scope="{row}">
          {{formatType(row.updateType)}}
        </template>
      </el-table-column>
      <el-table-column label="主题" prop="name"></el-table-column>
      <el-table-column label="日志内容" prop="content">
        <template slot-scope="{row}">
          <div v-html="row.content"></div>
        </template>
      </el-table-column>
      <el-table-column label="下载地址" prop="url"></el-table-column>
      <el-table-column label="h5地址" prop="h5url"></el-table-column>
      <el-table-column label="操作" prop="">
        <template slot-scope="{row}">
          <el-button type="text" @click="removeVersion(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="form.page" :page-sizes="gridPageSize" :page-size="form.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {appVersionListApi as listApi, deleteVersionApi as delApi} from '@/services/api/system'
  import {form, grid, factory} from '@/build'

  export default {
    name: "appVersionManage",
    mixins: [form, grid, factory],
    data() {
      return {
        form: {
          time: [moment(consts.ONLINE_DATE).format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD 23:59:59')],
          appType: -1,
          clientType: -1,
          version: '',
          page: 1,
          size: 10
        },
        tableData: []
      }
    },
    computed: {
      filters() {
        return {
          startTime: this.form.time ? moment(this.form.time[0]).format('YYYY-MM-DD HH:mm:ss') : '',
          endTime: this.form.time ? moment(this.form.time[1]).format('YYYY-MM-DD HH:mm:ss') : '',
          appType: this.form.appType,
          clientType: this.form.clientType,
          version: this.form.version,
          page: this.form.page,
          size: this.form.size
        }
      }
    },
    methods: {
      removeVersion(data) {
        delApi({id: data.id}).then(([result, data]) => {
          if (result) {
            this.doAction({type:'get',action:'getGrid'})
            self.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: data.message,
              type: 'error'
            })
          }
        })
      },
      formatType(status){
        return status === 0 ? '弱更新' : (status === 1 ? '强更新' : '掉签更新');
      }
    },
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '管理更新版本', true)});
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.getAll()
    },
    watch: {
      '$route.query.tab'(newVal) {
        if (newVal == 'two') this.doAction({type:'get',action:'getGrid'})
      }
    }
  }
</script>

<style scoped>

</style>
